import dayjs from "dayjs";
import * as echarts from "echarts";
// import { handleUnit } from "@/utils/byteToKbGb";
const seriesColor = [
  "#5B8FF9",
  "#46DEF2",
  "#FFA01B",
  "#FC6796",
  "#03CD61",
  "#0D72FF",
];
const baseAxis = {
  splitLine: {
    lineStyle: {
      color: "#E7E7E7",
      type: "dashed",
    },
  },
};
export const basiclineOption = {
  tooltip: {
    trigger: "axis",
    confine: true,
  },
  color: seriesColor,
  legend: {
    type: "scroll",
    icon: "roundRect",
    orient: "horizontal",
    bottom: 0,
    itemWidth: 8,
    itemHeight: 8,
    data: [],
  },
  grid: {
    left: 16,
    top: 16,
    right: 24,
    bottom: 20,
    containLabel: true,
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: [],
      axisLabel: {
        color: "#3C4353",
        formatter: (v) => dayjs(v * 1000).format("HH:mm"),
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#fff",
        },
      },
      ...baseAxis,
    }
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {},
      ...baseAxis,
    },
  ],
  series: [],
};
// 线性图series数据处理
export const buildLineSeriesData = (
  name,
  data = [],
  type = "line",
  areaStyle = { opacity: 0.12 }
) => {
  return {
    name: name,
    type: type,
    data: data,
    areaStyle: areaStyle,
    smooth: false,
    connectNulls: true,
    symbol: "none",
    lineStyle: {
      width: 1, // 设置线条宽度为1
    },
  };
};
// 柱状图series数据处理
export const buildBarSeriesData = (
  name,
  data = [],
  type = "bar",
) => {
  return {
    name: name,
    type: type,
    data: data,
    // barWidth: 24,
    // barGap: '10%', // 设置相邻两组柱状图之间的间距
    // barCategoryGap:16, // 设置同一组柱状图中不同柱之间的间距
    itemStyle: {
      barBorderRadius: [4,4 ,2,2] // 调整柱条的圆角
    },
  };
};
export const handleUnit = (val, cur_unit, reserve = 1) => {
  if (cur_unit === "B") {
    const value = Number(val);
    const KB = 1024;
    const MB = KB * 1024;
    const GB = MB * 1024;
    const formatValue = (val, unit) => {
      val = val.toFixed(reserve);
      return val + unit;
    };
    if (value / GB >= 1.0) {
      return formatValue(value / GB, "G");
    }
    if (value / MB >= 1.0) {
      return formatValue(value / MB, "M");
    } else if (value / KB >= 1.0) {
      return formatValue(value / KB, "K");
    } else {
      return value + "B";
    }
  } else {
    return `${val?.toFixed(reserve)}${cur_unit}`;
  }
};
export const handleTooltip = (val, cur_unit) => {
  return val.map(
      (item) => `
  <div style="display: flex; align-items: center; margin-bottom: 4px;">
    <span style="display: inline-block; width: 8px; height: 8px; background: ${
      item.color
    }; border-radius: 50%; margin-right: 4px;"></span>
    ${item.seriesName}: ${handleUnit(item.data,cur_unit)}
  </div>
`).join("");
};
